<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>字典管理</title>
    <%@include file="../../public/commonCss.jsp" %>
    <%@include file="../../public/commonJs.jsp" %>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/fileList.css"/>
</head>
<body ms-controller="main" class="ms-controller">
<div id="wrapper">
    <div class="boxmain whiteBox lrbox">
        <div class="lrboxmain borderL" style="margin-left:0px">
            <div class="from-header borderB contentbox">
                <div>
                    <span class="font14"> 所属分类:</span><a id="category"><span class=" fontOrange2">应急查看</span></a>
                </div>
            </div>
            <div class="from-body withheader contentbox" style=" overflow: auto;">
                <div ms-repeat="tableDatas">
                    <div class="panel panel-primary" ms-repeat-ll="el.trainCodeNums">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                上传人员编号-<span
                                    style="color:#2f17a8;font-size:12px">{{ll.userNum}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                机械师姓名:<span
                                    style="color:#2f17a8;font-size:12px">{{ll.userName}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                车次:<span
                                    style="color:#2f17a8;font-size:12px">{{ll.trainCode}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                车组号:<span
                                    style="color:#2f17a8;font-size:12px">{{ll.trainNum}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            </h3>
                        </div>
                        <div class="panel-body">
                            <div class="gallery-wrap">
                                <div class="column">
                                    <div class="inner" ms-repeat-ml="ll.myImages">
                                        <div style="background: rgb(247, 247, 247);"
                                             ms-on-click="picLayer(ml.filePath,ml.fileType)">
                                            <div class="img-wrap">
                                                <img style="height:319px"
                                                     ms-attr-src="${fileServerUrl}{{ml.filePath}}" class="mfp-fade"
                                                     ms-if="ml.fileType=='jpg'"/>
                                                <img style="height:319px" src="${ctx}/static/images/mp3.png"
                                                     class="mfp-fade" ms-if="ml.fileType=='mp3'"/>
                                                <img style="height:319px"
                                                     ms-attr-src="${fileServerUrl}{{ml.coverImagePath}}"
                                                     class="mfp-fade" ms-if="ml.fileType=='mp4'"/>
                                            </div>
                                            <div style="position:absolute;z-indent:2;left:13px;top:5px;"
                                                 ms-if="ml.fileType=='mp4'">
                                                <img style="height:319px"
                                                     src="${ctx}/static/images/mp4.png"
                                                     class="mfp-fade" ms-if="ml.fileType=='mp4'"/>
                                            </div>
                                            <div class="caption-static">
                                                <a ms-on-click="DownLoadReportIMG(ml.filePath,ml.fileType)"><span
                                                        style="float:right;color:#2f17a8;font-size:12px">下载</span> </a>
                                                <span style="color:#67a776;float: left;">&nbsp;{{ml.uploadDate}}</span>&nbsp;
                                                <span style="float: right;">{{ml.uploadTime}}&nbsp;</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    var zTreeObj;
    avalon.ready(function () {
        vm = avalon.define({
            $id: "main",
            tableDatas: [],//图片数据
            treeDatas: [],//菜单数据
            currentPage: 1,
            pageSize: 15,
            codeId: '',
            searchKey: {
                startDate: '${searchVo.startDate}',
                userNum: '${searchVo.userNum}',
            },
            title: ''
        })
        avalon.scan();
        loadTableData();
    });

    //下载图片
    function DownLoadReportIMG(imgPathURL, fileType) {
        imgPathURL = '${fileServerUrl}' + imgPathURL;
        window.location.href = '${ctx}/downloadController/downloadImage.action?imagePath=' + imgPathURL + "&fileType=" + fileType;
    }

    //初始化分页插件的方法
    function loadTableData() {
        var dataStr = $.param(vm.$model.searchKey);
        ajaxUtil.post("${ctx}/emergeFileController/selectAllEmergeFile.action", dataStr, true, function (data) {
            vm.tableDatas = data.datas;
        })
    }

    function picLayer(imagePath, fileType) {
        var fileUrl = '${fileServerUrl}' + imagePath;
        if (fileType == "jpg") {
            parent.layer.open({
                type: 2,
                title: false,
                area: ['60%', '95%'],
                shadeClose: true, //开启遮罩关闭
                content: '${ctx}/toImageShow.action?imagePath=' + fileUrl
            });
        } else if (fileType == "mp4") {
            //iframe层-多媒体
            layui.layer.open({
                type: 2,
                title: false,
                area: ['480px', '640px'],
                shade: 0.8,
                closeBtn: 0,
                shadeClose: true,
                content: fileUrl
            });
        } else if (fileType == "mp3") {
            var dataStr = {
                imagePath: imagePath
            };
            ajaxUtil.post("${ctx}/emergeFileController/changeMp3.action", dataStr, true, function (data) {
                parent.layer.open({
                    type: 2,
                    title: '自动播放',
                    area: ['700px', '530px'],
                    shadeClose: true,
                    fixed: false, //不固定
                    content: '${ctx}/static/player/index.jsp?url=' + data.url
                });
            });
        }
    }
</script>
</body>
</html>